<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .container{
            width: 500px;
            height: 200px;
            background-color: skyblue;
            display: flex;
            align-items: flex-start;
    
        }
        .item{
            background-color: pink;
            height: 20px;
            width: 20px;
            flex:1;
        }
        /* flex-basis : flex元素（子项）在主轴上的默认大小 */
        /* 重点： 主轴方向的大小， 优先级，  */
        /* 如果主轴是水平的，优先级就比宽度大，如果主轴是垂直的，它比高度的优先级高 */

        /* flex-basis 默认值为auto，如果元素有宽度，表示元素本身的大小，如果元素没宽度，得到内容的大小 */
        /* flex-basis: 0, 0%, px, 100% */

        /* 如果flex-basis写0，0%， 同时又写了width； 其实相当于这个元素没有宽度 */


        /* 
            flex: 1;

            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 0%;
        */

        /* flex: auto; 
        
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: auto;  ==> 元素默认有宽度，就是元素本身的宽度，如果没有宽度有内容，得到内容的宽度
        */


        /* ====================================
            flex: flex-grow, flex-shrink, flex-basis.
            //  扩大比例， 默认为0，
            //  缩小比例， 默认为1 ，  
            //  flex-basis默认为auto; flex元素占主轴上的默认大小。
            ===================================
        */

    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>